<template>
    <div class="board-mode-wrap">
        <flexbox justify="flex-start" wrap="nowrap" class="board-item" v-if="refresh">
            <template v-for="item of boardStages" :key="item.code">
                <board-list v-bind="$attrs" :info="item" :style="{ flex: 1, minWidth: `${Math.floor(100 / boardStages.length)}%` }" />
            </template>
        </flexbox>
    </div>
</template>

<script lang="ts">
import BoardList from './boardList.vue';
import { useEventListener } from '@/hooks/event/useEventListener';
import { getViewportOffset } from '@/utils/dom';
import store from '@/store';
import { defineComponent, computed, onMounted, ref, reactive, toRefs } from 'vue';
interface State {
    refresh: boolean;
}
export default defineComponent({
    name: 'BoardMode',
    components: {
        BoardList
    },
    setup() {
        const boardListRef = ref<any>();
        const state = reactive<State>({
            refresh: true
        });
        const boardStages = computed(() => {
            return store.getters.dicOptions.stage;
        });
        const calcHeight = () => {
            const boxEl: any = document.querySelector('.board-mode-wrap');
            const { bottomIncludeBody } = getViewportOffset(boxEl);
            boxEl.style.height = bottomIncludeBody - 48 + 'px';
        };
        onMounted(() => {
            calcHeight();
        });
        const sysSetChange = () => {
            state.refresh = false;
            setTimeout(() => {
                state.refresh = true;
            });
        };
        useEventListener({
            fn: calcHeight
        });
        return {
            ...toRefs(state),
            boardListRef,
            boardStages,
            sysSetChange
        };
    }
});
</script>

<style scoped lang="less">
.board-mode-wrap {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    .board-item {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
    }
}
</style>
